iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 10

讓按鈕來個酷動態!操縱DOM事件:JavaScript篇 (一)

  • 分享至 

  • xImage
  •  

一般來說前端技能來到第三課,就是要面對無所不在、生態系豐富、也象徵著永遠學不完的JavaScript了!比起HTML和CSS,利用JavaScript進行邏輯判斷、建立function、迴圈運算等方式,能讓網頁的應用更加多元,也可以操縱更複雜的動態與互動。

基本上利用HTML建立架構、CSS繪製外觀、JavaScript監控事件執行對應行為,是一個相當合理的安排。當然簡單的事件監控改變CSS狀態或是不具有邏輯判斷的animation,使用CSS撰寫即可囉~

使用JavaScript監測DOM事件:

第一步、指定網頁元件
原生JavaScript中指定網頁元件可以使用Id: getElementById,或是Class: getElementsByClassName

//使用Id指定
document.getElementById('my-div');
//使用Class指定
document.getElementsByClassName('my-div')[0];

可以把網頁元件指定至一個變數,會更好閱讀

//使用Id指定
let item=document.getElementById('my-div');
//使用Class指定
let item=document.getElementsByClassName('my-div')[0];

第二步、安排監聽事件
指定到對的網頁元件後,接下來可以使用 addEventListener()來進行事件的監聽:

item.addEventListener('click',function(){
    item.style.cssText = 'animation :my-animation-bg 4s both;'})

addEventListener傳入參數中,第一個是事件的string物件,第二個可以放置function,讓第一個參數所定義監測事件發生時,執行這個function。


前往後續文章
JavaScript 第二篇:https://ithelp.ithome.com.tw/articles/10271889


上一篇
讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (二)
下一篇
讓按鈕來個酷動態!操縱DOM事件:JavaScript篇 (二)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言